<!--
  ~ -
  ~  ============LICENSE_START=======================================================
  ~  Copyright (C) 2022 Nordix Foundation.
  ~  ================================================================================
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  ~  SPDX-License-Identifier: Apache-2.0
  ~  ============LICENSE_END=========================================================
  -->

<div class="app-constraints">
  <form novalidate class="w-sdc-form two-columns" [formGroup]="constraintForm">
    <div *ngFor="let constraint of constraintsArray.controls; let constraintIndex = index; trackBy:trackByFn">

      <div formArrayName="constraint">
        <div class="w-sdc-form-columns-wrapper" [formGroupName]="constraintIndex">
          <div class="w-sdc-form-column-small">
              <select class="i-sdc-form-select"
                      data-tests-id="constraints"
                      formControlName="type"
                      [value]="constraintsArray.at(constraintIndex).get('type').value"
                      (change)="onChangeConstraintType(constraintIndex, $event.target.value)">
                <option *ngIf="constraint" [value]="constraint.value.type"
                        hidden selected>
                  {{ConstraintTypesMapping[constraint.value.type]}}
                </option>
                <option *ngFor="let constraintType of constraintTypes"
                        [value]="constraintType"
                        [disabled]="disableConstraint(constraintType, constraint.value.type)">
                  {{ConstraintTypesMapping[constraintType]}}
                </option>
              </select>

            <div class="validation-errors">
              <ng-container *ngFor="let validation of validationMessages.type">
                <div class="input-error" *ngIf="constraintsArray.at(constraintIndex).get('type').hasError(validation.type);">
                  {{ validation.message }}
                </div>
              </ng-container>
            </div>
          </div>


          <div class="w-sdc-form-columns-wrapper">

            <div class="w-sdc-form-column">
              <div class="w-sdc-form-columns-wrapper" *ngIf="constraint.value.type == 'inRange'">
                <div class="w-sdc-form-column">
                  <input type="text" class="i-sdc-form-input myClass" required
                        (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 0)"
                        [value]="getInRangeValue(constraintIndex, 0)"/>

                  <ng-container *ngFor="let validation of validationMessages.constraint">
                    <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[0].hasError(validation.type);">
                      {{ validation.message }}
                    </div>
                  </ng-container>
                </div>
                <div class="w-sdc-form-column">
                  <input type="text" class="i-sdc-form-input myClass" required
                        (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)"
                        [value]="getInRangeValue(constraintIndex, 1)"/>

                  <ng-container *ngFor="let validation of validationMessages.constraint">
                    <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[1].hasError(validation.type);">
                      {{ validation.message }}
                    </div>
                  </ng-container>
                </div>
              </div>

              <div *ngIf="constraint.value.type == 'validValues'">
                <div class="w-sdc-form-columns-wrapper-block">
                  <div class="add-btn add-list-item w-sdc-form-column-block"
                      [ngClass]="{'disabled': isViewOnly}"
                      (click)="addToList(constraintIndex)">Add to List</div>
                </div>
                <div class="w-sdc-form-columns-wrapper" *ngFor="let value of constraintValuesArray(constraintIndex).controls; let valueIndex = index; trackBy:trackByFn">
                  <div class="w-sdc-form-column">
                    <input type="text" class="i-sdc-form-input" required 
                      [value]="value.value"
                      [disabled]=isViewOnly
                      (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/>
                  </div>

                  <ng-container *ngFor="let validation of validationMessages.constraint">
                    <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[valueIndex].hasError(validation.type);">
                      {{ validation.message }}
                    </div>
                  </ng-container>

                  <div class="w-sdc-form-column">
                    <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(constraintIndex, valueIndex)"></span>
                  </div>
                </div>
              </div>

              <div *ngIf="constraint.get('type').value != 'inRange' && constraint.get('type').value != 'validValues'">
                <input type="text" class="i-sdc-form-input myClass required" required
                       formControlName="value"
                       [value]="constraintsArray.at(constraintIndex).get('value').value"
                       (input)="onChangeConstraintValue(constraintIndex, $event.target.value)"/>

                <div class="validation-errors">
                  <ng-container *ngFor="let validation of validationMessages.constraint">
                    <div class="input-error" *ngIf="constraintsArray.at(constraintIndex).get('value').hasError(validation.type);">
                      {{ validation.message }}
                    </div>
                  </ng-container>
                </div>
              </div>
            </div>

            <div class="w-sdc-form-column-vsmall" *ngIf="!isViewOnly">
                <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeConstraint(constraintIndex)"></span>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="w-sdc-form-columns-wrapper-small" *ngIf="!isViewOnly">
        <div class="add-btn add-list-item w-sdc-form-column-small" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
        (click)="addConstraint()"> Add Constraint </div>
    </div>
  </form>
</div>
